<template>
  <div class="app-container home">
    <el-row :gutter="20" class="header">
      <el-col :span="6">
        <h3>数码状况</h3>
        <div>
          <div>累计生码量<span>546个</span></div>
          <div>已激活数码<span>546个</span></div>
        </div>
      </el-col>
      <el-col :span="6">
        <h3>防伪动态</h3>
        <div>
          <div>累计查询<span>546个</span></div>
          <div>本月保护<span>546个</span></div>
        </div>
      </el-col>
      <el-col :span="6">
        <h3>营销一览</h3>
        <div>
          <div>总参与量<span>546个</span></div>
          <div>今日参与量<span>546个</span></div>
        </div>
      </el-col>
      <el-col :span="6">
        <h3>生产监控</h3>
        <div>
          <div>待生产商品<span>546个</span></div>
          <div>今日生产<span>546个</span></div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart_content">
      <el-col :span="12">
        <div class="chart_title">防伪区域热力图</div>
        <div class="dateTab">
          <div @click="change1(1)" :class="{active:tabIndex1 == 1}">近7天</div>
          <div @click="change1(2)" :class="{active:tabIndex1 == 2}">近15天</div>
          <div @click="change1(3)" :class="{active:tabIndex1 == 3}">近30天</div>
        </div>
        <div ref="mapCharts" style="width:100%;height:280px;border:1px solid skyblue;"></div>
      </el-col>
      <el-col :span="12">
        <div class="chart_title">防伪综合查询趋势图</div>
        <div class="dateTab">
          <div @click="change2(1)" :class="{active:tabIndex2 == 1}">近7天</div>
          <div @click="change2(2)" :class="{active:tabIndex2 == 2}">近15天</div>
          <div @click="change2(3)" :class="{active:tabIndex2 == 3}">近30天</div>
        </div>
        <div ref="charts1" style="width:100%;height:280px;border:1px solid skyblue;"></div>
      </el-col>
      <el-col :span="12">
        <div class="chart_title">扫码趋势图</div>
        <div class="dateTab">
          <div @click="change3(1)" :class="{active:tabIndex3 == 1}">近7天</div>
          <div @click="change3(2)" :class="{active:tabIndex3 == 2}">近15天</div>
          <div @click="change3(3)" :class="{active:tabIndex3 == 3}">近30天</div>
        </div>
        <div ref="charts2" style="width:100%;height:280px;border:1px solid skyblue;"></div>
      </el-col>
      <el-col :span="12">
        <div class="chart_title">用户增长趋势图</div>
        <div class="dateTab">
          <div @click="change4(1)" :class="{active:tabIndex4 == 1}">近7天</div>
          <div @click="change4(2)" :class="{active:tabIndex4 == 2}">近15天</div>
          <div @click="change4(3)" :class="{active:tabIndex4 == 3}">近30天</div>
        </div>
        <div ref="charts3" style="width:100%;height:280px;border:1px solid skyblue;"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios'
export default {
  name: "index",
  data() {
    return {
      tabIndex1:1,
      tabIndex2:1,
      tabIndex3:1,
      tabIndex4:1,
    };
  },
  mounted(){
    this.mapchart()
    this.charts1()
    this.charts2()
    this.charts3()
  },
  methods: {
    mapchart(){
      let airData = [
            { name: '北京', value: 39.92 },
            { name: '天津', value: 39.13 },
            { name: '上海', value: 31.22 },
            { name: '重庆', value: 66 },
            { name: '河北', value: 147 },
            { name: '河南', value: 113 },
            { name: '云南', value: 25.04 },
            { name: '辽宁', value: 50 },
            { name: '黑龙江', value: 114 },
            { name: '湖南', value: 175 },
            { name: '安徽', value: 117 },
            { name: '山东', value: 92 },
            { name: '新疆', value: 84 },
            { name: '江苏', value: 67 },
            { name: '浙江', value: 84 },
            { name: '江西', value: 96 },
            { name: '湖北', value: 273 },
            { name: '广西', value: 59 },
            { name: '甘肃', value: 99 },
            { name: '山西', value: 39 },
            { name: '内蒙古', value: 58 },
            { name: '陕西', value: 61 },
            { name: '吉林', value: 51 },
            { name: '福建', value: 29 },
            { name: '贵州', value: 71 },
            { name: '广东', value: 38 },
            { name: '青海', value: 57 },
            { name: '西藏', value: 24 },
            { name: '四川', value: 58 },
            { name: '宁夏', value: 52 },
            { name: '海南', value: 54 },
            { name: '台湾', value: 88 },
            { name: '香港', value: 66 },
            { name: '澳门', value: 77 },
            { name: '南海诸岛', value: 55 }
        ]
        let scatterData = [
            {
                value: [117.283042, 31.86119]
            },{
                value:[104.065735, 30.659462]
            }
        ]
        let myCharts = echarts.init(this.$refs.mapCharts)
        axios.get('/static/json/china.json').then(function(res){
            echarts.registerMap('chinaMap', res.data)
            let option ={
                tooltip:{

                },
                geo: {
                    type: 'map',
                    map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
                    roam: true, // 设置允许缩放以及拖动的效果
                    zoom: 1, // 设置初始化的缩放比例
                    label: {
                        show: true // 展示标签
                    },
                    center: [104.065735, 34.659462], // 设置地图中心点的坐标  设置具体坐标后才可以进行滚轮缩放 center center 不行
                    
                },
                series: [
                    {
                        data: airData,
                        geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                        type: 'map',

                        
                    },
                    //  {
                    //     data: scatterData, // 配置散点的坐标数据
                    //     type: 'effectScatter',
                    //     coordinateSystem: 'geo', // 指明散点使用的坐标系统  geo的坐标系统
                    //     rippleEffect: {
                    //     scale: 10 // 设置涟漪动画的缩放比例
                    //     }
                    // }
                ],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        color: ['white', 'skyblue'] // 控制颜色渐变的范围
                    },
                    calculable: true ,// 出现滑块
                    
                }
            }

            myCharts.setOption(option)
        })
    },
    charts1(){
      let charts1 = echarts.init(this.$refs.charts1)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [0, 0, 0, 0, 0, 0, 0],
            type: 'line'
          }
        ]
      }
      charts1.setOption(option)

    },
    charts2(){
      let charts2 = echarts.init(this.$refs.charts2)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:  [0, 0, 0, 0, 0, 0, 0],
            type: 'line'
          }
        ]
      }
      charts2.setOption(option)

    },
    charts3(){
      let charts3 = echarts.init(this.$refs.charts3)
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data:  [0, 0, 0, 0, 0, 0, 0],
            type: 'line'
          }
        ]
      }
      charts3.setOption(option)

    },

    change1(index){
      this.tabIndex1 = index
    },
    change2(index){
      this.tabIndex2 = index
    },
    change3(index){
      this.tabIndex3 = index
    },
    change4(index){
      this.tabIndex4 = index
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  .header{
    .el-col{
      h3{
        background: #DDDDDD;
        margin: 0;
        padding: 10px;
        font-size: 16px;
      }
      >div{
        background: #F5F5F6;
        padding: 0 10px;
        div{
          line-height: 38px;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
          span{
            // margin: 0 20px;
          }
        }
      }
    }
  }

  .chart_content{
    .el-col{ 
      margin-top: 20px;
      .chart_title{ 
        border-bottom: 1px solid #888;
        padding: 10px;
      }
      .dateTab{
        display: flex;
        margin-top: 20px;
        >div{
          border: 1px solid #000;
          font-size: 14px;
          width: 60px;
          text-align: center;
          padding: 3px 0;
          &.active{ 
            background: #516276;
            color: #fff;
          }
        }
        >div:nth-child(2){
          border-left: none;
          border-right: none;
        }
      }
    }
  }
}
</style>

